// pages/video/video.js
import request from '../../utils/request'
Page({
  //1.获取video页面的导航项
  async getVideoNavList() {
    const result = await request({
      url: '/video/group/list'
    })
    if (result.code === 200) {
      this.setData({
        navList: result.data.slice(0, 20),
        navId: result.data[0].id
      })
    }
  },

  // 2. 实现动态切换nav项 将被单击的导航项的id给到navId
  changeNavId(event) {
    this.setData({
      navId: event.currentTarget.dataset.id
    })

    // 重新发送请求 获取导航标签项 对应的视频列表
    this.getVideoListData()
  },

  // 3. 根据导航项id 来获取视频列表
  async getVideoListData() {
    const {
      navId: id
    } = this.data
    const result = await request({
      url: '/video/group',
      data: {
        id
      }
    })
    if (result.code === 200) {
      const videoList = result.datas.map(item => item.data)
      this.setData({
        videoList,
        isTriggerd: false
      })
    }
  },

  // 4. 设置视频的播放或是暂停
  handlerPlayOrPause(event) {
    // 4.1 获取当前被单击的视频的vid
    const videoId = event.currentTarget.id

    // 4.2 将这个值存储一份 后续会用
    this.setData({
      videoId // 始终存储的是当前被单击的视频的vid
    })
    // 4.3 判断是否是第1次单击 如果第1次则先创建播放器上下文对象 来控制视频的播放 
    // 如果是非第一次 还要进行多项判断 比如 是否单击的同一个还是新的？
    // 将播放器上下文对象 单独存在this.player这个属性当中
    if (!this.player) {
      // 4.4 创建播放器上下文对象  后面用此对象来控制视频的播放或是暂停
      this.player = wx.createVideoContext(this.data.videoId)
      // 4.5 立即播放
      this.player.play()
      // 4.6 记录一下视频的播放状态 
      this.playStatus = true // true 播放  false 暂停
      // 4.7 再记录一下当前的视频id
      this.vid = this.data.videoId
    } else {

      // 不是第一次单击 又分两种情况
      // 4.8 判断一下此时单击的是原来那一个，还是新的视频?
      if (this.vid === this.data.videoId) {
        // 如果条件成立 说明此时单击的是同一个视频
        // 4.9 判断当前视频的播放状态
        if (this.playStatus) {
          // 4.10 暂停视频
          this.player.pause()

          // 4.11 重新记录一下视频的播放状态 
          this.playStatus = false
        } else {
          // 4.12 再次播放
          this.player.play()

          // 4.13 重新记录一下视频的播放状态 
          this.playStatus = true
        }
      } else {
        // 此时说明单击的是新的视频 也就是另一个视频
        // 4.14先将之前的暂停掉
        this.player.pause()

        // 4.15 此时应该重新创建一个播放器上下文对象来控制这个新的视频的播放 单项歌曲
        this.player = wx.createVideoContext(this.data.videoId)

        // 4.16 查找之前有没有播放过
        const currentVideo = this.data.recordList.find(item => item.vid === this.data.videoId)

        // 4.17 如果有播放过，要跳转到之前播放的位置 然后继续向后播放
        currentVideo && this.player.seek(currentVideo.currentTime)

        // 4.18 立即让当前这个播放
        this.player.play()

        // 4.19 记录一下视频的播放状态 
        this.playStatus = true // true 播放  false 暂停

        // 4.20 再记录一下当前的视频id
        this.vid = this.data.videoId
      }
    }
  },

  // 5. 收集视频的播放记录
  handlerTimeUpdate(event) {
    // 5.1 获取data中的数据
    const recordList = this.data.recordList

    // 5.2 从recordList数组当中，查找一下，有没有当前正在播放的视频
    let currentVideo = recordList.find(item => item.vid === this.data.videoId)

    // 5.3 如果之前记录过 则需要更新播放的位置
    if (currentVideo) {
      currentVideo.currentTime = event.detail.currentTime
    } else {

      // 5.4 如果之前没有记录过，则要重新记录
      currentVideo = {
        vid: this.data.videoId,
        currentTime: event.detail.currentTime
      }
      recordList.push(currentVideo)
    }

    // 再更新回this.data当中
    this.setData({
      recordList
    })
  },

  // 6. 视频播放完成
  handlerEnded() {
    // 6.1 先拿 到那个列表项
    const recordList = this.data.recordList
    // 6.2 从列表项中查找一下是否存在
    const index = recordList.findIndex(item => item.vid === this.data.videoId)
    // 6.3 判断是否查找到 如果找到则要删除
    index != -1 && recordList.splice(index, 1)
    // 6.4 更新回去
    this.setData({
      recordList
    })
  },

  // 7. 开启下拉刷新 也就是重新加载
  handlerRefresh() {
    this.setData({
      isTriggerd: true
    })
    this.getVideoListData()
  },

  // 8. 开启上拉加载
  handlerLower() {
    // 由于重新加载也没有新的内容 ，此时我们模块新内容的加载，再次加8个
    let videoList = this.data.videoList
    const newVideoList = videoList.slice(0, 8)
    videoList = [...videoList, ...newVideoList]
    if (videoList.length > 40) return

    // 再更新回去
    this.setData({
      videoList
    })
  },
  /**
   * 页面的初始数据
   */
  data: {
    navList: [], //导航标签列表
    navId: 0, //导航ID
    videoList: [], //视频列表
    videoId: '', // 当前播放视频的vid 也就是被单击的视频
    recordList: [], // 用来记录被播放的视频
    isTriggerd: false, // 记录下拉的状态
  },

  /**
   * 生命周期函数--监听页面加载
   */
  async onLoad(options) {
    // 1. 获取video页面中的导航项列表
    await this.getVideoNavList()

    // 2. 根据导航项id 来获取视频列表数据
    await this.getVideoListData()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage({
    from
  }) {
    if (from === 'button') {
      return {
        title: '很不错的一个节目',
        path: '/pages/video/video',
        imageUrl: '/static/images/recommendSong/02.jpg'
      }
    }

  }
})